<template>
  <div>
    <van-nav-bar title="搜索列表" left-arrow @click-left="$router.back()" />


      <!--  容器 -->
      <!-- <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList"
      > -->
      <!-- 初始化后  会立刻执行一次  getArtList    cate_id  '' -->
      <!-- loading   是否转圈 是否正在加载中  -->

      <!-- <li
          style="margin-top: 10px 0"
          class="main-content"
          @click="
            $router.push({
              path: '/article',
              query: { id: item._id, title: item.title },
            })
          "
          v-for="item in list"
          :key="item.index"
        >
          <div :class="{ column: item.poster_type == 2 }">
            <span class="contentTitle"> {{ item.title }} </span>
            <div
              class="imgBox"
              :class="{
                none: item.poster_type == 1,
                articlesingleImg: item.poster_type == 2,
                articltwoImg: item.poster_type == 3,
              }"
            >
              <van-image
                width="100"
                height="100"
                v-for="img in item.imageSrc"
                :src="img"
                :key="img._id"
                fit="cover"
              />
            </div>
          </div>
          <div class="footer">
            <em>{{ item.author }}</em>
            <em>
              评论
              {{ item.comment }}
            </em>
            <em>
              {{ item.time | conversion }}
            </em>
          </div>
        </li>
      </van-list> -->

      <commonList :API="searchApi" :params="{ key_word }" :refresh="true">
     <template #default="{list}">
      <li
          style="margin-top: 10px 0"
          class="main-content"
          @click="
            $router.push({
              path: '/article',
              query: { id: item._id, title: item.title },
            })
          "
          v-for="item in list"
          :key="item.index"
        >
          <div :class="{ column: item.poster_type == 2 }">
            <span class="contentTitle"> {{ item.title }} </span>
            <div
              class="imgBox"
              :class="{
                none: item.poster_type == 1,
                articlesingleImg: item.poster_type == 2,
                articltwoImg: item.poster_type == 3,
              }"
            >
              <van-image
                width="100"
                height="100"
                v-for="img in item.imageSrc"
                :src="img"
                :key="img._id"
                fit="cover"
              />
            </div>
          </div>
          <div class="footer">
            <em>{{ item.author }}</em>
            <em>
              评论
              {{ item.comment }}
            </em>
            <em>
              {{ item.time | conversion }}
            </em>
          </div>
        </li>
     </template>
      </commonList>

  </div>
</template>

<script>

import commonList from "@/components/commonList.vue";

import { search as searchApi } from "@/api/api";

export default {
  name: "searchList",
  components: {
  
    [commonList.name]: commonList,
  },
  data() {
    return {
    

      searchApi,
    };
  },
  computed: {
    key_word() {
      return this.$route.query.key_word;
    },
  },
  methods: {
    // getList(flag) {
    //   let { key_word, skip, limit } = this;
    //   searchApi({
    //     key_word,
    //     skip,
    //     limit,
    //   }).then((res) => {
    //     console.log(res);

    //     if (res.code == 0) {
    //       if (flag) {
    //         this.list = res.data;
    //         this.isRefresh = false;
    //       } else {
    //         this.list.push(...res.data);
    //       }

    //       let len = this.list.length;

    //       if (len >= res.count) {
    //         this.finished = true;
    //       } else {
    //         this.loading = false;
    //         this.skip = len;
    //       }
    //     }
    //   });
    // },
    onRefresh() {
      // this.skip = 0;
      // this.finished = false;
      // this.getList(true);
    },
  },
  filters: {
    //3.定义一个处理函数，参数value为要处理数据
    conversion: function (value) {
      //调用Date的方法，处理时间戳
      return new Date(value).toLocaleString();
    },
  },
};
</script>

<style lang="scss"  lang="less"  scoped>
li {
  list-style: none;
}

.main-content {
  width: 100%;
  .contentTitle {
    font-size: 1.2rem;
    font-weight: 500;
  }
  .none {
    display: block;
  }
  //一张图片
  .articlesingleImg {
    display: flex;
    justify-content: center;
  }
  // 两张图片
  .articltwoImg {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  em {
    font-style: normal;
    color: #ccc;
    font-size: 14px;
  }
}

.column {
  display: flex;
  justify-content: space-between;
}
// 没有图片
</style>